<template>
	<view class="user_config_content">
		<view class="config_top">
			<view  @click="go_back">
				<image src="../../static/back_icon.png" style="width: 22px;height: 22px;"></image>
			</view>
		</view>
		<view class="user_config_cotainer">
			<view style="padding: 0 15px 0 15px;" v-for="item in user_list" :key="item.name">
				<view class="config_item" @click="update_handle(item.name)">
					<text>{{item.name}}</text>
					<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-top: 2px;"></image>
				</view>
				<u-line v-if="item.line"></u-line>
			</view>
		</view>
		<view class="user_config_cotainer">
			<view style="padding: 0 15px 0 15px;" v-for="item in app_list" :key="item.name">
				<view class="config_item" @click="update_handle(item.name)">
					<text>{{ item.name }}</text>
					<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-top: 2px;"></image>
				</view>
				<u-line v-if="item.line"></u-line>
			</view>
		</view>
		<view class="quitlogin" @click="loginout">
			退出账号
		</view>
		<u-modal :show="show_update_username" :showCancelButton="true" @confirm="update_username" @cancel="show_update_username=false">
			<view class="slot-content">
				<u--input
				    placeholder="请输入新昵称"
				    border="surround"
				    v-model="username_value"
					style="width: 200px;"
				></u--input>
			</view>
		</u-modal>
		<u-modal :show="show_update_password" :showCancelButton="true" @confirm="update_password" @cancel="show_update_password=false">
			<view class="slot-content">
				<u--input
				    :placeholder="password_tip"
				    border="surround"
				    v-model="password_value"
					style="width: 200px;"
				></u--input>
			</view>
		</u-modal>
		<u-modal :show="show" :content='content' :showCancelButton="true" @confirm="quit" @cancel="cancel"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	export default {
		data() {
			return {
				user_list: [
					{
						name: '修改昵称',
						line: true
					},
					{
						name: '上传头像',
						line: true
					},
					{
						name: '修改密码',
						line: false
					},
				],
				app_list: [
					{
						name: '帮助反馈',
						line: true
					},
					{
						name: '关于我们',
						line: true
					},
					{
						name: '版本更新',
						line: false
					},
				],
				show: false,
				content: '确定退出当前账号吗？',
				show_update_username: false,
				username_value: '',
				show_update_password: false,
				password_value: '',
				password_tip: '输入手机号验证'
			}
		},
		methods: {
			update_password() {
				if(this.password_tip=='输入手机号验证'){
					if(this.password_value==uni.getStorageSync('mobile')){
						this.password_value = ''
						this.password_tip='输入新密码'
					}else{
						this.show_update_password = false
						this.$refs.uToast.show({
							type: 'default',
							title: '默认主题',
							message: "手机号错误",
						})
					}
				}
				else if(this.password_tip=='输入新密码'){
					if(this.password_value.length<6){
						this.show_update_password = false
						this.$refs.uToast.show({
							type: 'default',
							title: '默认主题',
							message: "密码长度不能少于6位",
						})
						return
					}
					if(this.password_value.length>18){
						this.show_update_password = false
						this.$refs.uToast.show({
							type: 'default',
							title: '默认主题',
							message: "密码长度不能多于18位",
						})
						return
					}
					uni.request({
						url:api + '/update_password/',
						method:'POST',
						data:{
							username: uni.getStorageSync('username'),
							password: this.password_value
						},
						success:res=>{
							this.show_update_password = false
							this.$refs.uToast.show({
								type: 'success',
								title: '成功主题',
								message: "修改成功",
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/login/login'
								})
							},1000)
						}
					})
				}
			},
			update_username() {
				if(this.username_value!=''){
					uni.request({
						url:api + '/update_username/',
						method:'POST',
						data:{
							username: uni.getStorageSync('username'),
							newusername: this.username_value
						},
						success:res=>{
							uni.setStorageSync('username', this.username_value)
							this.show_update_username = false
							this.$refs.uToast.show({
								type: 'success',
								title: '成功主题',
								message: "修改成功",
							})
						}
					})
				}else{
					this.show_update_username = false
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "请输入昵称",
					})
				}
			},
			update_handle(val){
				if(val == '修改昵称'){
					this.show_update_username = true
				}
				else if(val == '上传头像'){
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "请在网页端上传",
					})
					return
				}
				else if(val == '关于我们' || val == '帮助反馈' || val == '版本更新'){
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "请联系QQ: 2080970386 咨询",
					})
					return
				}
				else if(val = '修改密码'){
					this.show_update_password = true
				}
				
			},
			go_back() {
				uni.navigateBack()
			},
			loginout() {
				this.show = true
			},
			quit() {
				uni.setStorageSync('username', '')
				uni.setStorageSync('mobile', '')
				uni.redirectTo({
					url:'/pages/login/login'
				})
			},
			cancel() {
				this.show = false
			}
		}
	}
</script>

<style>
.user_config_content{
	background-color: #f4f4f5;
	height: 100vh;
}
.config_top{
	height: 75px;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: white;
	padding: 10px 15px 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end
}
.user_config_cotainer{
	margin: 10px 15px 10px 15px;
	background-color: white;
	border-radius: 10px;
}
.config_item{
	padding: 15px 0 15px 0;
	display: flex;
	justify-content: space-between;
}
.quitlogin{
	margin: 10px 15px 10px 15px;
	background-color: white;
	border-radius: 50px;
	text-align: center;
	color: red;
	padding: 15px 15px 15px 15px;
	margin-top: 30px;
}
</style>
